<!DOCTYPE HTML>
<html lang="en" ng-app="example">
<head>
  <title>n3-charts - AngularJS</title>
  <link rel="stylesheet" type="text/css" media="screen" href="LineChart.min.css">
  <style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }

  .example {
    width: calc(100% - 200px);
    border: 1px solid lightgrey;
    margin: 30px;
    padding: 10px 10px 30px 10px;
  }

  .example-chart, .example-controls {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 10px 30px 10px;
  }

  .example-chart {
    height: 280px;
  }

  .example-title {
    text-align: center;
    font-size: 1.2em;
    font-family: Roboto;
    text-transform: capitalize;
    margin-bottom: 10px;
    font-weight: 100;
  }

  .example-title a {
    color: grey;
    text-decoration: none;
  }

  <% _.each(examples, function(example) { %>
    .<%=example.name%> <%=example.data.style || '{}'%>
  <% }); %>

  </style>
</head>

<body>
  <div class="examples">
    <% _.each(examples, function(example) { %>

    <div class="example <%=example.name%>" ng-controller="<%=example.name%>Ctrl">
      <div class="example-title">
        <a id="<%=example.name%>" href="/<%=example.name%>.html"><%=example.name%></a>
      </div>
      <%=example.data.angular.html%>
    </div>

    <% }); %>


  </div>
  <script src="/angular/angular.js"></script>
  <script src="/d3/build/d3.js"></script>
  <script src="LineChart.js"></script>
  <script type="text/javascript">

  angular.module('example', ['n3-line-chart'])

  <% _.each(examples, function(example) { %>
    .controller('<%=example.name%>Ctrl', function(data, options) {
      return <%=example.data.angular.js%>;
    }(<%=example.data.data%>, <%=example.data.options%>))
  <% }); %>


  </script>
</body>
</html>
